var Content = React.createClass({
    getInitialState: function () {
        return {
            inputText: ""
        }
    },
    handleChange: function (e) {
        this.setState({
            inputText: e.target.value
        })
    },
    handleSubmit: function () {
        console.log("reply To: " + this.props.selectName + "\n" + this.state.inputText)
    },
    render: function () {
        return <div>
            <textarea onChange={this.handleChange} placeholder="please enter something..."></textarea>
            <button onClick={this.handleSubmit}>submit</button>
        </div>
    }
});

var Comment = React.createClass({
    getInitialState: function () {
        return {
            names: ["Tim", "John", "Hank"],
            selectName: ""
        }
    },
    handleSelect: function (e) {
        this.setState({
            selectName: e.target.value
        })
    },
    render: function () {
        var options = [];
        for (var i in this.state.names) {
            options.push(<option value={this.state.names[i]}>{this.state.names[i]}</option>)
        }
        return <div>
            <select onChange={this.handleSelect}>
                {options}
            </select>
            <Content selectName={this.state.selectName}></Content>
        </div>
    }
});
ReactDOM.render(<Comment/>, document.getElementById("container"));